<template>
    <div id="create-edit-container">
        <el-drawer
                direction="rtl"
                :visible.sync="stateManager.editDialogVisible"
                :title="modalTitle"
                custom-class="demo-drawer"
                ref="drawer"
                :before-close="closeDialog">
            <div class="dialog-drawer-content">
            <el-form ref="model" :model="model" :rules="ruleValidate">
                <!--姓名和指向类型-->
                <el-row type="flex" :gutter="20">
                    <el-col :span="12" >
                        <el-form-item label="导航名称" prop="name">
                            <el-input v-model="model.name" placeholder="请填写导航名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" >
                        <el-form-item label="指向类型" prop="point_type">
                            <el-select v-model="model.point_type"    @change = "ContentList" style="width: 100%" placeholder="请选择指向类型">
                                <el-option
                                    v-for="(item,index) in typeArr"
                                    :key="index"
                                    :label="item"
                                    :value="index">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" :gutter="20"  v-if="model.point_type === 0">
                    <el-col :span="12" >
                        <el-form-item label="栏目标题" prop="point_category_id">
                            <el-cascader :props="{checkStrictly: true,
                        label: 'name',children: 'children',value:'id'}"
                                         :options="categoryList"
                                         @change = "ContentList"
                                         style="width: 100%;"
                                         clearable
                                         placeholder="请选择栏目" v-model="model.point_category_id"></el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="链接内容" prop="point_content_id">
                            <el-select
                                v-model="model.point_content_id"
                                :clearable="true" style="width: 100%;" placeholder="请选择链接内容"
                            >
                                <el-option
                                    v-for="item in contentSelectList"
                                    :key="item.id"
                                    :label="item.content_detail?item.content_detail.title:''"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" :gutter="20"  v-if="model.point_type === 1">
                    <el-col :span="12" >
                        <el-form-item label="栏目标题" prop="point_category_id">
                            <el-cascader :props="{checkStrictly: true,
                        label: 'name',children: 'children',value:'id'}"
                                         :options="categoryList"
                                         style="width: 100%;"
                                         clearable
                                         placeholder="请选择栏目" v-model="model.point_category_id"></el-cascader>

                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" :gutter="20"  v-if="model.point_type === 2">
                    <el-col :span="24" >
                        <el-form-item label="指向url" prop="point_url">
                            <el-input v-model="model.point_url" placeholder="请输入指向url" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
                <div class="dialog-drawer-footer">
                    <el-button type="ghost" @click="closeDialog" >取消</el-button>
                    <el-button type="primary" @click="saveModel"   :loading="stateManager.buttonLoading" >{{stateManager.buttonLoading?'提交中':'确定'}}</el-button>
                </div>
            </div>

        </el-drawer>
    </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import {getContentsByCategory} from  '@/api/cms'
  export default {
    props: {
      stateManager: {
        type: Object
      }
    },
    data:  function() {
      return {
        model: this.$modelDataSource({
          url:'/api/cms/navigation',
          dataKey: 'model',
          attributes: {
            id: 0,
            name:'',
            parent_id:0,
            sort:0,
            point_url:'',
            point_type:'',
            point_content_id:'',
            point_category_id:'',
            point_category_path:''
        }
        }),
        typeArr:[
          '单页',
          '列表',
          '外链'
        ],
        contentSelectList:[],
        isLoading: false,
        ruleValidate: {
          name: [
            {required: true, message: '请填写导航名称', trigger: 'blur'}
          ],
          point_type: [
            {required: true, message: '指向类型必填', trigger: 'change'}
          ],
          point_category_id: [
            {required: true, type: 'array',message:'请选择指向栏目', trigger: 'change'}
          ],
          point_content_id: [
            {required: true, type: 'integer',message:'请选择指向内容', trigger: 'change'}
          ],
          point_url: [
            {required: true, message:'请选择指向地址不能为空',trigger: 'blur'}
          ],
        }
      }
    },
    methods: {
      closeDialog: function () {
        if(this.stateManager.buttonLoading){
          return false
        }
        this.stateManager.editDialogVisible = false
        this.stateManager.listLoading = false
        this.model.reset()
        this.$refs['model'].resetFields()
        this.stateManager.editModelId = 0
      },
      ContentList(){
        this.contentSelectList = []
        if(this.model.point_category_id && this.model.point_type == 0){
          getContentsByCategory(this.model.point_category_id).then((res)=>{
            this.contentSelectList = res.data

          })
          return  this.contentSelectList
        }
      },
      saveModel: function () {
        let self = this
        self.$refs['model'].validate((valid) => {
          if (valid) {
            if (self.stateManager.editModelId == 0) {
              self.model.parent_id = self.stateManager.parentId
            }
            self.isLoading = false
            self.stateManager.buttonLoading = true
            self.model.save(
              function () {
                self.$message.success('保存成功')
                self.stateManager.refreshList = true
                self.stateManager.buttonLoading = false
                self.closeDialog()
              }, function (errors) {
                self.stateManager.buttonLoading = false
                self.isLoading = false
                self.$message.error('保存失败')
              })
          } else {
            console.log('表单验证失败')
          }
        })
      },
    },
    computed: {
      ...mapGetters([
        'categoryList',
      ]),
      modalTitle () {
        switch (this.stateManager.editModelId) {
          case 0:
            return '添加导航'
            break
          default:
            return '编辑导航'
        }
      },
    },
    watch: {
      'stateManager.editModelId': function (newValue) {
        let self = this
        this.model.fetch(newValue, { include:'update' }, function () {
          self.stateManager.editDialogVisible = true
          self.ContentList()
        }, function () {
          self.stateManager.listLoading = false
        })
      }
    }
  }
</script>
